<template>
  <div>
    <el-dialog
      title="修改订单信息"
      :visible.sync="dialogVisible"
    >

      <el-form inline label-width="120" ref="form" size="small">
        <el-form-item prop="orderID" label="订单ID">
          <el-input type="text" v-model="order.orderID" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="orderName" label="订单名称">
          <el-input type="text" v-model="order.orderName" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="wareName" label="商品名称">
          <el-input type="text" v-model="order.wareName" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="wareCount" label="数量">
          <el-input-number clearable v-model="order.wareCount" ></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" >确 定</el-button>
      </span>
    </el-dialog>
  <el-dropdown @command="handleCommand" >
  <div class="el-dropdown-link">
    选择仓库<i class="el-icon-arrow-down el-icon--right"></i>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="成品仓库" id="chengpinn" onclick="chengPin" value="成品仓库">成品仓库</el-dropdown-item>
      <el-dropdown-item command="原料仓库">原料仓库</el-dropdown-item>
      <el-dropdown-item command="酒水仓库">酒水仓库</el-dropdown-item>
      <el-dropdown-item command="电子产品仓库">电子产品仓库</el-dropdown-item>
      <el-dropdown-item command="其他仓库" divided>其他仓库</el-dropdown-item>
    </el-dropdown-menu>
  </div>
  </el-dropdown>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="head-warehouse">成品仓库</span>
        <el-button style="float: right; padding: 3px 0" type="text" >操作按钮</el-button>
      </div>



      <div>
        <el-table
          :data="order"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <el-table-column
            prop="orderID"
            label="订单ID"
            sortable
            width="250">
          </el-table-column>
          <el-table-column
            prop="orderName"
            label="订单名称"
            width="250">
          </el-table-column>
          <el-table-column
            prop="wareName"
            label="商品名称"
            width="300"
          >
          </el-table-column>
          <el-table-column
            prop="wareCount"
            label="数量"
            width="250"
          >
          </el-table-column>

          <el-table-column
            prop="operate"
            label="操作"

          >
            <template slot-scope="scope">
              <el-button size="mini" type="primary"
                         @click="update">编辑
              </el-button>
              <el-button size="mini" type="danger"
                         @click="del">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

    </el-card>

</div>



</template>

<script>
export default {
  data() {
    return {

      order: [
        { orderID : 'CPJC20210411001',
          orderName:'华为手机入库',
          wareName:'手机',
          wareCount:'100',
        }
      ],

      // search: '',
      dialogVisible:false
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    update() {
      this.dialogVisible = true
    },
    del() {
      this.$confirm('是否继续删除数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleCommand(command) {
      this.$message('已选择：' + command);
    },
    chengPin(e){
      console.log(e)
    }
  }
}
</script>

<style >
.el-dropdown-link {
  margin-left: 30px;
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  margin-top: 15px;
  margin-left: 30px;
  font-size: 12px;
}

.el-body{
  margin-left: 30px;
}

.el-body-p{
  margin-top: 30px;
  font-size: 18px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  margin-top: 13px;
  width: auto;
}

.head-warehouse{
  font-size: 18px;
}
</style>
